<template>
  <div class="canvas-workflow-info">
    <el-tabs :key="tabsKey" v-model="activeName" class="tighten-tab " :stretch="!rightDrawerExpanded"
      @tab-click="handleClick" type="card" >
      <template v-if="!rightDrawerExpanded">
        <el-tab-pane label="画布信息" name="canvas" />
        <el-tab-pane label="工作流信息" name="workflow" />
      </template>
      <!-- <el-tab-pane label="工作流日志" name="workflowLog" /> -->
    </el-tabs>
    <div class="interval-container">
      <div v-show="activeName === 'canvas'" class="canvas-info">
        <el-form label-position="top" class="canvas-info-edit">
          <el-form-item label="名称">
            <span>{{ store.workflowInfo.name }}</span>
          </el-form-item>
          <el-form-item label="描述">
            <span>{{ store.workflowInfo.description }}</span>
          </el-form-item>
          <el-form-item class="item-text" label="创建时间">
            <span>{{ store.workflowInfo.create_time }}</span>
          </el-form-item>
          <el-form-item class="item-text" label="上一次更新">
            <span>{{ store.workflowInfo.update_time }}</span>
          </el-form-item>
        </el-form>
        <div v-if="!viewExperiment" class="edit-button">
          <el-tooltip class="item" effect="dark" :content="'(Shift+S)'" placement="right">
            <el-button type="primary" @click="exportFile()">导出工作流文件</el-button>
          </el-tooltip>
          <el-button v-if="!viewVersion" type="primary" @click="importWorkflowFileDialog">导入工作流文件</el-button>
        </div>
      </div>
      <div v-show="activeName === 'workflow'" class="workflow">
        <div v-if="isInstance">
          <el-form label-width="68px" label-position="left">
            <el-form-item label="状态">
              <el-tag v-if="store.instanceState" :type="(instancesStateColor as any)[store.instanceState]">{{ (instancesStateText as any)[store.instanceState]
              }}</el-tag>
            </el-form-item>
            <el-form-item v-if="store.instancesRunData.start_time" label="开始时间">
              {{ store.instancesRunData.start_time }}
            </el-form-item>
            <el-form-item v-if="store.instancesRunData.end_time" label="结束时间">
              {{ store.instancesRunData.end_time }}
            </el-form-item>
            <el-form-item v-if="store.instancesRunData.run_time" label="运行时长">
              {{ store.instancesRunData.run_time }}
            </el-form-item>
          </el-form>
        </div>
        <el-empty v-else description="暂未运行" />
      </div>
      <div v-show="activeName === 'workflowLog'" class="workflow">
        <workflow-log v-if="isInstance" ref="workflowLogRef" />
        <el-empty v-else description="暂无日志" />
      </div>
    </div>
    <context-menu-dialog v-if="contextMenuDialogVisible" ref="contextMenuDialog"
      v-model:visible="contextMenuDialogVisible" @emitChange="emitChange"/>
    <workflow-file-dialog v-if="importWorkflowFileDialogVisible" ref="importWorkflowFileDialogRef"
      v-model:visible="importWorkflowFileDialogVisible" @dialogClose="dialogClose"/>
  </div>
</template>

<script setup lang="ts">

import { ref, computed, onMounted, nextTick, watch, inject } from "vue"
import '@antv/x6-vue-shape'
import { designerStore } from 'src/stores/designerTool/designerTool'
import { instancesStateColor, instancesStateText } from 'src/utils/designerTool/constants'
import Mousetrap from 'mousetrap'
import dagGraph from 'src/pages/designerTool/canvas/DagEdit/graph/index.js'
import WorkflowLog from './workflowLog.vue'
import ContextMenuDialog from './contextMenuDialog.vue'
import workflowFileDialog from './importWorkflowFileDialog.vue'
const store = designerStore()
const activeName = ref('canvas')
const tabsKey = ref(0)
const contextMenuDialogVisible = ref(false)
const importWorkflowFileDialogVisible = ref(false)
const props = defineProps({
  rightDrawerExpanded: {
    type: Boolean
  }
})
const workflowLogRef = ref<any>(null)
const contextMenuDialog = ref<any>(null)
const importWorkflowFileDialogRef = ref(null)
const workflowState = ref(false)
const isInstance = computed(() => {
  return store.workflowInfo.id && store.instanceId
})
const viewVersion = computed(() => {
  return !!store.versionId
})
const viewExperiment = computed(() => {
  return !!store.experimentId || !!store.flowReadonlyId
})
const readonly = computed(() => {
  return viewVersion.value || viewExperiment.value
})
watch(() => store.workflowInfo, (newData, oldData) => {
  init()
})
watch(() => activeName.value, (newData, oldData) => {
  handleClick()
})
watch(() => props.rightDrawerExpanded, (newData, oldData) => {
  if (newData) {
    switch (activeName.value) {
      case 'canvas':
      case 'workflow':
        activeName.value = 'workflowLog'
        handleClick()
        break
      default:
    }
  } else {
    activeName.value = 'canvas'
  }
  setTimeout(() => {
    tabsKey.value++
  }, 100)
})
watch(() => store.events.initEvent.index, (newData, oldData) => {
  initEvent()
})
const emits = defineEmits(['updateHeadInfo', 'updateDrawerExpanded'])
function init() {
  emits('updateHeadInfo', store.workflowInfo.name)
}
function initEvent() {
  if (!readonly.value) {
    // 导出工作流文件
    Mousetrap.bind('shift+s', () => {
      dagGraph.exportWorkflow()
      return false
    })
  }
}
function handleClick() {
  switch (activeName.value) {
    case 'workflowLog':
      if (isInstance.value) {
        workflowLogRef.value.init()
      }
      updateDrawerExpanded()
      break
    default:
  }
}
function exportFile() {
  dagGraph.exportWorkflow()
}
function updateDrawerExpanded() {
  if (!props.rightDrawerExpanded) {
    emits('updateDrawerExpanded', true)
  }
}
function openContextMenuDialog(type: any) {
  contextMenuDialogVisible.value = true
  nextTick(() => {
    contextMenuDialog.value.init(type)
  })
}
function importWorkflowFileDialog(row: any) {
  importWorkflowFileDialogVisible.value = true
  nextTick(() => {
    (importWorkflowFileDialogRef.value as any).init(row)
  })
}
function dialogClose(){
  importWorkflowFileDialogVisible.value=false
}
function emitChange(e:any){
  contextMenuDialogVisible.value=e
}
defineExpose({handleClick,openContextMenuDialog})
</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
.canvas-workflow-info {
  height: calc(100% - 36px);

  ::v-deep.el-tabs {
    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__item {
      height: 33px;
      line-height: 33px;
    }

    .el-tabs__active-bar {
      height: 1px;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .interval-title {
    padding: 9px;
    line-height: 16px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #dcdee2;

    &.interval-title-top-border {
      border-top: 1px solid #dcdee2;
    }
  }

  .interval-container {
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px;

    .workflow {
      height: 100%;

      .el-form-item {
        margin-bottom: 4px;
      }
    }

    .edit-button {
      padding-right: 10px;
      .el-button+.el-button {
        margin: 0;
      }

      .el-button {
        margin: 0 6px 6px 0;
      }
    }
  }

  .canvas-info {
    margin-top: 8px;

    ::v-deep.el-form-item {
      margin-bottom: 14px;

      .el-form-item__label {
        padding: 0;
      }
    }

    .not-line-feed {
      word-break: break-all;
      line-height: 20px;
      display: block;
      padding-top: 10px;
    }

    .el-form-item {
      ::v-deep.el-form-item__label {
        line-height: 15px;
      }

      ::v-deep.el-input-number--medium {
        width: 100%;
      }
    }
  }

  .text-align-center {
    text-align: center;
  }
}
.tighten-tab{
  :deep(.el-tabs__header){
    background: rgb(247, 247, 247);
    border: none;
    height: 30px;
    border-radius: 3px;
    .el-tabs__nav ,.el-tabs__item{
      border: none;
    }
    .el-tabs__item{
      height: 30px;
    }
    .is-active{
      background: #3d5ce41a;
      color: #3D5CE4;
    }

  }
}
</style>
